@charset "UTF-8";
/* =CSS Reset */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)

*/
/* Nesse estilo geral, se encontra as configurações
css da barra do menu superior vertical, foto background e barra lateral expansiva
*/

/* 

<!-- nav menusuperior-->
<!-- class menudemusico-->
<!-- esquerda -->
<!-- novidades -->
<!-- direita -->

*/



#menusuperior{  
      width: 100%;
      position: fixed;
      font-size: 1.2vw;
      z-index: 74;
}



#menusuperior ul {
    list-style: none; 
    overflow: hidden;
    align-items: right;
    height: 3.0vw;

     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
}

#menusuperior li {
    float: right;
    margin: 0.5% 2% 0% 0%;

}

 #menusuperior li a {
    display: block;
    color: white;
    text-align: center;
    padding: 0.5em 1em;
    text-decoration: none;

}

... /* box dentro da box */
#menusuperior li a, .dropbtno {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 1em 1em;
    text-decoration: none;
    font-size: 1.2vw;

}

#menusuperior li a:hover, .dropdowno:hover .dropbtno {
background-image: -webkit-linear-gradient(0deg, #21afe2 0%, #0c6994 100%);

    margin-bottom: -0.5vw;

}

#menusuperior li.dropdowno {
    display: inline-block;
}

#menusuperior .dropdowno-contento {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 5em;
    box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2);

}

#menusuperior .dropdowno-contento a {
    color: black;
    padding: 0.9em 0.9em;
    text-decoration: none;
    display: block;
    text-align: left;
}

#menusuperior .dropdowno-contento a:hover {
  background-color:  #3da8f5;
  color: white;

}

#menusuperior .dropdowno:hover .dropdowno-contento {
    display: block;

}

.teclaudioicone{
    background-image: -webkit-linear-gradient(0deg, #21afe2 0%, #0c6994 140%);
     width: 10%;
     float: left;
     height: 3vw;
     align-items:center;
     text-align:center;
} 
.menulist{
   background-color:#212121;
   width: 90%;
   float: left;
   height: 3vw;
}

*, html, body {
  margin:0;
  padding:0;
  }


... /* mais regras CSS reset */

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
/* regra para o clear float */
.cf:before,
.cf:after {contento: " ";display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}

 /* as duas div dentro do primeiro menu */
 


body {
 /* espaço à esquerda para a barra vertical vísivel do menu */
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 

  }


/*  -------------- Banner logo após o menu----------------------  */

.banner{

  width: 100%;
  height: 45vw;

}

.banner {

  background-image: url(banner4.jpg); 
  background-repeat: no-repeat;
  background-size: cover;

}

/*  ----- Div de conteudo dentro do banner-------------  */
.banner .conteudo{
  margin-top: 10%;
  text-align: center;
  color: black;
}

.banner .conteudo h1{
    color:white;
  font-size: 4vw;
}

.banner .conteudo h5{
    color:white;
  font-size: 1vw;
}


.banner .conteudo .botao{
  /*  Botão do banner  */
  padding: 0.5% 3%;
  margin-top:2%;
  font-size:1.3vw;
    background-color: white;
  color: black;
   cursor: pointer;
  border-color: white;
   border-width:0.1vw; 
}


.botao:focus{
    outline:0;
}

.banner .conteudo .botao:hover {
  /*  Botão do banner  */

 background-color: white;
  color: black;
   border-style:none; 
  font-size:1.2vw;
}





/*  ----------------------------- Opções de métodos para o usuário-----------------------------------  */

/*  ----------video de apresentação do site-------------  */
.espaco  {

    background-color: transparent;
 width: 100%;

}






/*--------------------- referente a parte da div e listas coletiva dentro da div serviços ---------------------*/


.espacousuario{
background-image: url("fundoservico2.jpg");
  background-size: 50%;

}

.opcoes{
  display: flex;
  align-items: left;
  height: 25vw;
  
}

.opcoes{
  margin-top: 15%
  width: 100vw;

}




.assistencia, .recomendacoes, .suporte{
  height: 86%;
  width: 86%;
  background:rgba(255, 255, 255,1);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
      margin-left: -6%;
}


.pulse{
  margin-left: 12%;
  margin-top: 5%;
  height: 65%;
  width: 17%;
  float: left;
  background:rgba(5, 153, 239,1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: Arial,Times New Roman,Helvetica,sans-serif;
  animation: pulse 1.5s linear infinite;
}


.pulse ul {
    list-style: none;
    margin-top: 15%;
    text-align: center;
    width: 60%;
    margin-left: 22%;
}

.pulse ul li {
    margin-top: 10%;
}

.pulse a {
    text-decoration: none;
    color: #3b3b3b;
    font-size: 1vw;
}

.pulse a:hover{
   font-size: 1.3vw;
   margin-top: 0%;
   margin-bottom: -10%;
    text-decoration: none;
    color: #3b3b3b;
}

@keyframes pulse {
  0%{

    box-shadow: 0 0 0 0 rgba(5, 153, 239,1);
  }

  100%{
    box-shadow: 0 0 0 3vw rgba(5, 153, 239,0);
  }
}






/*Demonstrando opcoes */
.apresentando{

  margin-top: 0%;
  margin-bottom: 0%;
  width: 100%;
  height: 30vw;
background-color:  none;
}



.professor, .equipamentos, .dicas, .canais {
    /* background-color: #dedede; */
    background-image: url(acessorio.jpg);
    background-repeat: no-repeat;
    z-index: -11;
}

#professor, #equipamentos, #canais, #dicas {
    height: 48vh;
}


 #dicas ul {

    list-style-type:none;
}

 #dicas li {

    text-align:center;
}

.menu ul{

  margin: 5% 0% 0% 12%;
  list-style-type:none;

}

.mouse{
    width: 5%;
    background: none;
    position: fixed;
    margin-top: -6%;
    margin-left: 93%;
    align-items: right;
    z-index: 10000;
}

.menu ul li{

  display: inline;
  margin: 0% 0% 0% 1%;
    box-shadow: 0 5px 25px rgba(0,0,0,.9);
  border-radius: 15px;
  background-color: none;

}



.menu:hover {
cursor: pointer;

}



/*  div das opções de informações para o usuário */

/*  div das opções de informações para o usuário */
.escolha{
  width: 100%;
  height: 7vw;
  background-image: -webkit-linear-gradient(0deg, #018dc0 30%, #19485e 100%);

}



.escolha .esc{
  width: 21%;
  margin-left: 3%;
  height: 100%;
  float: left;
}

.escolha .esc h3{
margin-top: 5%;
font-size: 1.3vw;
}


/*Botao do escolha */
.escolhabtn {
  border:none;
  width: 100%;
  height: 7vw;
  cursor: pointer;
    background-color: transparent;
    color: white;
}

.escolhabtn:hover {
  background-color:white;
  color:#3da8f5; 

}



.escolhabtn:focus {
  background-color:white;
  color: #3da8f5;
}

/*  ester egs */
#contador{
  margin-left: 100%;
  display: none; 
}


/*div de conteudo de professores */

.professor ul{

text-align: center;

list-style-type: none;



}

.professor ul li{

    margin-left: 4vw;
    display: inline;
    z-index: 1;

}


.professor img{

  width: 13vw;
}

.professor img:hover{

  position: relative;

  transition-delay: 0.3s;
  z-index: 2;
  width: 11vw;
}





#assistencia{
  margin-left: 10%;

}



/* regra para as divs das propagandas laterais do site, propaganda esquerda e direita  */
.propaganda{


  position: relative; 
  width: 100%;
  height: 7vw;
  background-image: -webkit-linear-gradient(0deg, #018dc0 30%, #19485e 100%);
  background-repeat: repeat;


}


.propaganda-primeira{
  margin-bottom: 35%;
}


/* aqui é a parte do código do carousel, os vídeos do canal do site*/

.videos{
  width: 80%;
  float: left;
}

.ir, .voltar{
  width:10%;
  float: left;
  margin-top: 10%;
}

.videos ul{
  list-style-type: none;
}

.videos li {
    display: inline-block;
    margin-left: 2%;
    margin-top: 4%;
    width: 30%;
    height: 50vh;
}

 .voltar img {
  width: 2vw;
}

.ir img {
  width: 2vw;
}
.wall{
  display: none;
  text-align: center;

}

.wall:target{
  display: block;
}

/* aqui termina a parte do código do carousel, os vídeos do canal do site*/







/*  -------------------------------------- regra para a div novidade do site-------------------------------------------------  */

#organizabox{
  width:100%;
  min-width:100%; 
  margin-top: 3%;
}



#organizabox ul li{
  display: inline-block;

}


#segundobox{
    margin-left: 80%;
    margin-top: 0%;
    width: 13%;
    background-color: red;
}


.segundobox select{

  background:white;
  color:#333;
  padding: 1.2%;
  width: 100%;
  height: 2.5em;
  border: none;
  font-size: 1vw;
 box-shadow: 0 5px 25px rgba(0,0,0,.5);
  -webkit-appearance: button;
  outline: :none;
}




.Alavancas, .Amplificadores, .Fones, .Pedais, .Pedaleiras, .Software{
  display: none;
}

.Afinadores a ,.Alavancas a, .Amplificadores a, .Fones a, .Pedais a, .Pedaleiras a, .Software a{
 color: black;
}




/*--------------- parte referente ao texto da div acima-----*/

/*--------------- parte referente ao texto da div acima-----*/

.imagempost{
margin: 2% 0% 0% 0%;
width: 20%;
height: 15vw;
  float: left;
}

img{
      vertical-align: middle;
      border-radius: 1vw;
   
}

.textopost{

    float: left;
    color: black;
    margin: 3% 0% 0% 5%;
    width: 70%;
    height: auto;
    font-size:1vw;
     background-color:#ffffffc9; 
     background-color: #ffffffc9;
    background-image: url(fundoservico.png);
    background-blend-mode: normal;
    background-size: 40vw;
     border-radius: 1vw;

}


.agrupatexto{
 width: 95%;
 margin-left: 2%;

}



/* regra para o rodapé */

  

  /*  Backend do footer "parte do fundo colorida e posições" */


  /*  Backend do footer "parte do fundo colorida e posições" */
#footer{

  position: relative;
   background-color: #111315; 
  height: 12vw;
  width:100%;
 font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

}

#footer h1{

color: white;
font-size: 1vw;
    text-align: center;

}


#footer ul{

color:white;
margin:8% 0% 3% 0%;
font-size: 0.8vw;
 list-style-type:none;
     text-align: center;


}

#footer a{ 
  color: #cccdce;  
  text-decoration: none;
}



#footer a:hover{ 
  color: white;
  font-size: 1.0vw;

}

                    /*  as divs internas do footer, cada list é uma div   */

                                


/*  Div de mapa do site   */
                  #mapadosite {
                  margin: 2% 3% 0% 25%;
                  float: left;
                  width: 10%
                  }

                  #mapadosite ul li{
                      margin:  2% 0% 0% 0%;
                  }


                  /*  Div dos serviços   */
                  #servicos {
                  margin: 2% 3% 0% 3%;
                  float: left;
                  width: 13%;

                  }      

                  #servicos ul li {
                  margin: 4% 0% 0% 0%;

                  }   




                  /*  Div do sobre   */
                   #sobre{
                  margin: 2% 3% 0% 4%;
                  float: left;
                  width: 10%;
                  }


                  #sobre ul li{
                      margin:  4% 0% 0% 0%;

                  }



                /*  Div do copright   */
                   #copright{
                  margin: 1% 0% 0% 0%;
                  float: left;
                  width: 14%;
                  }


                  #copright ul li{
                      margin:  4% 0% 0% 0%;

                  }